<template>
	<view class="page">
		<!-- 顶部导航栏 - 专业标识设计 -->
		<view class="ai-topbar">
			<view class="header-content">
				<text class="ai-title elderly-text-large">智能AI助手</text>
				<text class="ai-subtitle elderly-text">内容由 AI 生成</text>
			</view>
			<view class="header-actions">
				<view class="voice-switch elderly-pressable" :class="{ active: voiceEnabled }" @tap="toggleVoicePlay">
					<text class="switch-icon">{{voiceEnabled ? '🔊' : '🔇'}}</text>
				</view>
				<view class="help-btn elderly-pressable" @tap="showVoiceHelp">
					<text class="help-icon">❓</text>
				</view>
			</view>
		</view>
		<!-- 中部对话区 - 沉浸式对话体验 -->
		<scroll-view class="chat-list" scroll-y scroll-with-animation :scroll-into-view="scrollInto">
			<!-- 欢迎引导区域 -->
			<view class="welcome-section" v-if="messages.length <= 2">
				<view class="welcome-card">
					<text class="welcome-title elderly-text-large">👋 您好！我是您的智能AI助手</text>
					<text class="welcome-desc elderly-text">我可以帮您解答问题、创作内容、分析图片等</text>
					<view class="example-questions">
						<text class="example-title elderly-text">试试问我：</text>
						<view class="question-chips">
							<view class="question-chip elderly-pressable" @tap="useQuick('今天天气怎么样？')">
								<text class="chip-text elderly-text">今天天气怎么样？</text>
							</view>
							<view class="question-chip elderly-pressable" @tap="useQuick('帮我写一首诗')">
								<text class="chip-text elderly-text">帮我写一首诗</text>
							</view>
							<view class="question-chip elderly-pressable" @tap="useQuick('解释一下人工智能')">
								<text class="chip-text elderly-text">解释一下人工智能</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 消息列表 -->
			<view :id="'msg-'+m.id" class="msg-row" :class="m.role==='user'?'right':'left'" v-for="m in messages" :key="m.id">
				<view class="avatar-container">
					<image class="avatar" :src="m.role==='user'? userAvatar : aiAvatar" />
					<view class="avatar-badge" v-if="m.role==='ai'">AI</view>
				</view>
				<view class="bubble" :class="m.role==='user'?'user':'ai'">
                    <!-- 支持文本和图片消息 -->
                    <text v-if="!m.image" class="message-text">{{m.text}}</text>
                    <image v-if="m.image" class="msg-image" :src="m.image" mode="widthFix" />
                </view>
			</view>
			
			<!-- 正在输入状态 -->
			<view v-if="typing" class="msg-row left">
                <view class="avatar-container">
					<image class="avatar breath" :src="aiAvatar" />
					<view class="avatar-badge">AI</view>
				</view>
                <view class="bubble ai">
                    <text class="typing">
                        <text class="d1">●</text>
                        <text class="d2">●</text>
                        <text class="d3">●</text>
                    </text>
                </view>
            </view>
			<view id="bottom-anchor" style="height:20rpx" />
		</scroll-view>

	<!-- 快捷提问 - 功能分组优化 -->
	<view class="quick-panel" :class="{ collapsed: isQuickPanelCollapsed }">
		<!-- 功能分组标题 -->
		<view class="panel-header" @tap="toggleQuickPanel">
			<text class="panel-title elderly-text-large">💡 智能助手</text>
			<text class="panel-toggle">{{ isQuickPanelCollapsed ? '展开' : '收起' }}</text>
	</view>

		<!-- 核心功能组 - 增强视觉层级 -->
		<view class="function-group" v-if="!isQuickPanelCollapsed">
			<view class="group-header">
				<text class="group-title elderly-text-large">⚡ 核心功能</text>
				<text class="group-subtitle elderly-text">最常用的智能助手功能</text>
			</view>
			<view class="group-buttons">
				<view 
					class="chip core-function pressable" 
					v-for="(func, index) in coreFunctions" 
					:key="func.id"
					:class="{ 'frequent': func.isFrequent }"
					:style="{ '--icon-color': func.color }"
					@tap="useQuick(func.text)"
				>
					<view class="chip-icon-wrapper" :style="{ backgroundColor: func.color + '20' }">
						<text class="chip-icon" :style="{ color: func.color }">{{func.icon}}</text>
					</view>
					<text class="chip-text elderly-text">{{func.text}}</text>
				</view>
			</view>
		</view>
		
		<!-- 生活服务组 - 增强视觉层级 -->
		<view class="function-group" v-if="!isQuickPanelCollapsed">
			<view class="group-header">
				<text class="group-title elderly-text-large">🏠 生活服务</text>
				<text class="group-subtitle elderly-text">日常生活便捷服务</text>
			</view>
			<view class="group-buttons">
				<view 
					class="chip service-function pressable" 
					v-for="(func, index) in serviceFunctions" 
					:key="func.id"
					:style="{ '--icon-color': func.color }"
					@tap="useQuick(func.text)"
				>
					<view class="chip-icon-wrapper" :style="{ backgroundColor: func.color + '20' }">
						<text class="chip-icon" :style="{ color: func.color }">{{func.icon}}</text>
					</view>
					<text class="chip-text elderly-text">{{func.text}}</text>
				</view>
			</view>
		</view>
		
		<!-- 更多功能 -->
		<view class="more-functions" v-if="!isQuickPanelCollapsed">
			<view class="chip more-btn pressable" @tap="showMoreFunctions">
				<text class="chip-icon">⚙️</text>
				<text class="chip-text elderly-text">更多功能</text>
			</view>
		</view>
	</view>
	
	<!-- 分隔线 -->
	<view class="divider"></view>

    <!-- 底部操作栏 - 四大功能入口设计 -->
    <view class="fixed-input-bar">
        <view class="input-container">
            <!-- 四大功能入口区域 -->
            <view class="function-entries-section">
                <view class="function-entries-row">
                    <view class="function-entry elderly-pressable" @tap="useQuick('深度思考')">
                        <view class="entry-icon">🧠</view>
                        <text class="entry-text elderly-text">深度思考</text>
                    </view>
                    <view class="function-entry elderly-pressable" @tap="handleCamera">
                        <view class="entry-icon">📷</view>
                        <text class="entry-text elderly-text">拍照识物</text>
                    </view>
                    <view class="function-entry elderly-pressable" @tap="useQuick('生活缴费')">
                        <view class="entry-icon">💳</view>
                        <text class="entry-text elderly-text">生活缴费</text>
                    </view>
                    <view class="function-entry elderly-pressable" @tap="useQuick('一键求助')">
                        <view class="entry-icon">🆘</view>
                        <text class="entry-text elderly-text">一键求助</text>
                    </view>
                </view>
            </view>
            
            <!-- 输入栏区域 -->
            <view class="input-section">
                <view class="input-wrapper">
                    <!-- 输入框 -->
                    <input 
                        class="main-input-field elderly-text" 
                        v-model="draft" 
                        placeholder="发消息或按住说话..." 
                        @input="handleInputTyping"
                        @confirm="send"
                        @blur="handleInputBlur"
                        :auto-focus="false"
                        :focus="false"
                        cursor-spacing="20rpx"
                    />
                    
                    <!-- 语音按钮 -->
                    <view class="voice-btn elderly-pressable" @longpress="handleVoiceStart" @touchend="handleVoiceEnd" @touchcancel="handleVoiceCancel" :class="{ 'voice-active': isRecording }">
                        <view class="voice-icon">
                            <text class="mic-icon">🎤</text>
                        </view>
                    </view>
                </view>
            </view>
            
            <!-- 语音录制状态提示 -->
            <view class="voice-status" v-if="isRecording">
                <text class="status-text elderly-text">🎤 正在录音，松开结束</text>
            </view>
        </view>
    </view>

    <!-- 新增：语音录制提示（仅录音时显示） -->
    <view class="voice-recording-tip" v-if="isRecording">
        正在录音...松开发送
    </view>

    <!-- 新增：正在输入提示（仅输入时显示） -->
    <view class="typing-tip" v-if="typing && draft.length > 0">
        正在输入...
    </view>

		<view class="safe-gap" />
		
		<!-- 更多功能弹窗 - 优化布局和交互 -->
		<view class="more-functions-modal" v-if="showMoreFunctionsModal" @tap="closeMoreFunctionsModal">
			<view class="modal-content" @tap.stop>
				<view class="modal-header">
					<view class="header-left">
						<view class="back-btn elderly-pressable" @tap="closeMoreFunctionsModal">
							<text class="back-icon">←</text>
						</view>
						<view class="header-text">
							<text class="modal-title elderly-text-large">更多功能</text>
							<text class="modal-subtitle elderly-text">选择您需要的功能</text>
						</view>
					</view>
					<view class="close-btn elderly-pressable" @tap="closeMoreFunctionsModal">
						<text class="close-icon">✕</text>
					</view>
				</view>
				<view class="modal-body">
					<view class="function-category" v-for="category in allFunctionCategories" :key="category.id">
						<view class="category-header">
							<text class="category-title elderly-text-large">{{category.name}}</text>
							<text class="category-description elderly-text">{{category.description}}</text>
						</view>
						<view class="category-functions">
							<view 
								class="function-item elderly-pressable" 
								v-for="func in category.functions" 
								:key="func.id"
								:style="{ '--icon-color': func.color }"
								@tap="useQuick(func.text)"
							>
								<view class="function-icon-wrapper" :style="{ backgroundColor: func.color + '20' }">
									<text class="function-icon" :style="{ color: func.color }">{{func.icon}}</text>
								</view>
								<text class="function-name elderly-text">{{func.text}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { storageManager } from '@/utils/storage-simple.js'
export default {
	data(){
		return{
			userAvatar:'/static/user-avatar.svg',
			aiAvatar:'',
			messages:[
				{ id:1, role:'user', text:'你好，AI' },
				{ id:2, role:'ai', text:'您好！我是智能助手，有什么可以帮您的？' }
			],
			draft:'',
			idSeed:3,
			scrollInto:'bottom-anchor',
			typing:false,
			
			// 新增：功能面板控制
			isQuickPanelCollapsed: false,
			showMoreFunctionsModal: false,
			
			// 核心功能 - 统一图标风格
			coreFunctions: [
				{ id: 1, text: '今天天气怎样', icon: '☀️', isFrequent: true, color: '#FFD166' },
				{ id: 2, text: '讲个笑话', icon: '😊', isFrequent: true, color: '#FF6B6B' },
				{ id: 3, text: '帮我提醒吃药', icon: '💊', isFrequent: false, color: '#4A90E2' },
				{ id: 4, text: '附近有什么', icon: '📍', isFrequent: false, color: '#6DD400' }
			],
			
			// 生活服务功能 - 统一图标风格
			serviceFunctions: [
				{ id: 5, text: '帮我叫车', icon: '🚗', color: '#9D4EDD' },
				{ id: 6, text: '查快递', icon: '📦', color: '#FF7E29' },
				{ id: 7, text: '订外卖', icon: '🍔', color: '#FF6B6B' },
				{ id: 8, text: '预约挂号', icon: '🏥', color: '#4A90E2' }
			],
			
			// 重新梳理功能分类 - 按使用频率和场景分类
			allFunctionCategories: [
				{
					id: 'daily',
					name: '日常高频',
					description: '每天都会用到的功能',
					functions: [
						{ id: 9, text: '健康咨询', icon: '❤️', color: '#FF6B6B' },
						{ id: 10, text: '运动建议', icon: '🏃', color: '#4A90E2' },
						{ id: 11, text: '饮食推荐', icon: '🥗', color: '#6DD400' },
						{ id: 12, text: '睡眠监测', icon: '😴', color: '#9D4EDD' }
					]
				},
				{
					id: 'tools',
					name: '实用工具',
					description: '生活工作中的小助手',
					functions: [
						{ id: 13, text: '计算器', icon: '🧮', color: '#FF7E29' },
						{ id: 14, text: '翻译', icon: '🌐', color: '#4A90E2' },
						{ id: 15, text: '单位换算', icon: '📏', color: '#6DD400' },
						{ id: 16, text: '二维码生成', icon: '📱', color: '#9D4EDD' }
					]
				},
				{
					id: 'leisure',
					name: '休闲娱乐',
					description: '放松身心的娱乐活动',
					functions: [
						{ id: 17, text: '听音乐', icon: '🎵', color: '#FF6B6B' },
						{ id: 18, text: '看视频', icon: '📺', color: '#4A90E2' },
						{ id: 19, text: '玩游戏', icon: '🎮', color: '#6DD400' },
						{ id: 20, text: '读书', icon: '📚', color: '#9D4EDD' }
					]
				}
			],
			presetQuick:['今天天气怎样','帮我提醒吃药','讲个笑话','附近医院','我要交电费','帮我叫车','查看健康'],
			userQuick:[],
			// 新增：语音录制相关状态
			isRecording: false,
			recordTimer: null,
			recordPath: '',
			// 新增：输入状态计时器
			typingTimer: null,
			// 新增：语音控制状态
			voiceEnabled: true,
			aiStatus: '在线',
			voiceCommands: [
				{ text: '我要交电费', action: 'navigate', target: '/pages/services/services' },
				{ text: '帮我叫车', action: 'navigate', target: '/pages/services/services' },
				{ text: '查看健康', action: 'navigate', target: '/pages/mine/mine' },
				{ text: '紧急求助', action: 'emergency', target: null },
				{ text: '今天天气', action: 'weather', target: null }
			]
		}
	},
	onLoad(){
		this.loadUserQuick()
		this.loadChatHistory()
	},
	onShow(){
		this.loadUserQuick()
		// 页面显示时重置录音状态
		this.isRecording = false
		clearTimeout(this.recordTimer)
	},
	onUnload(){
		// 页面卸载时停止录音
		if(this.isRecording){
			uni.stopRecord()
		}
		clearTimeout(this.typingTimer)
	},
	computed:{
		canSend(){ return this.draft.trim().length>0 || this.recordPath }
	},
	methods:{
		// 新增：切换语音播放状态（顶部喇叭按钮）
		toggleVoicePlay(){
			uni.showToast({ title:'语音播放开关（演示）', icon:'none' })
		},

		// 优化：图片选择（适配 UniApp API）
		handlePickImage(){
			// 检查相册授权
			uni.getSetting({
				success: (res) => {
					if(!res.authSetting['scope.writePhotosAlbum']){
						uni.authorize({
							scope: 'scope.writePhotosAlbum',
							success: () => this.openImagePicker(),
							fail: () => uni.showToast({ title:'请开启相册权限', icon:'none' })
						})
					}else{
						this.openImagePicker()
					}
				}
			})
		},
		// 图片选择核心逻辑
		openImagePicker(){
			uni.chooseImage({
				count: 1,
				sourceType: ['album', 'camera'],
				sizeType: ['compressed'], // 压缩图片，节省流量
				success: (res) => {
					// 发送图片消息
					const id = this.idSeed
					const imgMsg = { 
						id, 
						role:'user', 
						text:'[图片]', 
						image: res.tempFilePaths[0] 
					}
					this.messages = [...this.messages, imgMsg]
					this.idSeed = id + 1
					this.saveChatHistory()
					this.$nextTick(() => this.scrollInto = 'msg-' + id)

					// 模拟AI回复
					this.typing = true
					setTimeout(() => {
						const aiId = this.idSeed
						const aiMsg = { 
							id: aiId, 
							role:'ai', 
							text:'已识别图片，需要进一步分析吗？' 
						}
						this.messages = [...this.messages, aiMsg]
						this.idSeed = aiId + 1
						this.typing = false
						this.saveChatHistory()
						this.$nextTick(() => this.scrollInto = 'msg-' + aiId)
					}, 1500)
				}
			})
		},

		// 新增：输入监听（控制“正在输入”提示）
		handleInputTyping(e){
			const draft = e.detail.value
			this.draft = draft
			// 重置计时器：3秒无输入则隐藏提示
			clearTimeout(this.typingTimer)
			this.typingTimer = setTimeout(() => {
				if(this.draft === draft) this.typing = false
			}, 3000)
		},

		// 新增：输入框失焦（重置输入状态）
		handleInputBlur(){
			clearTimeout(this.typingTimer)
			this.typing = false
		},

		// 新增：语音录制-开始（长按触发，含动效）
		handleVoiceStart(){
			// 步骤1：触觉反馈（重按）
			if(uni.vibrateShort){
				try { uni.vibrateShort({ type: 'heavy' }) } catch(e){}
			}
			
			// 步骤2：防短按误触-延迟350ms开始录音
			this.recordTimer = setTimeout(() => {
				uni.startRecord({
					success: (res) => {
						this.isRecording = true
						this.recordPath = res.tempFilePath
						
						// 步骤3：录音开始后再次触觉反馈
						if(uni.vibrateShort){
							try { uni.vibrateShort({ type: 'light' }) } catch(e){}
						}
					},
					fail: (err) => {
						uni.showToast({ title:'录音授权失败', icon:'none' })
						this.isRecording = false
					}
				})
			}, 350)
		},

		// 新增：语音录制-结束（松开发送，含动效）
		handleVoiceEnd(){
			clearTimeout(this.recordTimer)
			if(!this.isRecording) return

			// 步骤1：停止录音
			uni.stopRecord()
			this.isRecording = false
			
			// 步骤2：触觉反馈（发送成功）
			if(uni.vibrateShort){
				try { uni.vibrateShort({ type: 'medium' }) } catch(e){}
			}

			// 步骤3：发送语音消息
			const id = this.idSeed
			const voiceMsg = { 
				id, 
				role:'user', 
				text:'[语音]', 
				voice: this.recordPath 
			}
			this.messages = [...this.messages, voiceMsg]
			this.idSeed = id + 1
			this.recordPath = ''
			this.saveChatHistory()
			this.$nextTick(() => this.scrollInto = 'msg-' + id)

			// 步骤4：模拟AI回复（typing动画）
			this.typing = true
			setTimeout(() => {
				const aiId = this.idSeed
				const aiMsg = { 
					id: aiId, 
					role:'ai', 
					text:'已接收语音，正在转文字...' 
				}
				this.messages = [...this.messages, aiMsg]
				this.idSeed = aiId + 1
				this.typing = false
				this.saveChatHistory()
				this.$nextTick(() => this.scrollInto = 'msg-' + aiId)
				
				// 步骤5：AI回复后触觉反馈
				if(uni.vibrateShort){
					try { uni.vibrateShort({ type: 'light' }) } catch(e){}
				}
			}, 1200)
		},

		// 新增：语音录制-取消（手指移出按钮）
		handleVoiceCancel(){
			clearTimeout(this.recordTimer)
			if(this.isRecording){
				uni.stopRecord()
				this.isRecording = false
				this.recordPath = ''
				uni.showToast({ title:'录音已取消', icon:'none' })
			}
		},

		// 优化：发送消息（支持文本/语音/图片）
		send(){
			if(this.typing) return

			// 文本消息发送
			if(this.draft.trim()){
				const id1 = this.idSeed
				const userMsg = { id:id1, role:'user', text:this.draft.trim() }
				this.messages = [...this.messages, userMsg]
				this.draft = ''
				this.idSeed = id1 + 1
				this.saveChatHistory()
				this.$nextTick(() => this.scrollInto = 'msg-' + id1)

				// 模拟AI回复
				this.typing = true
				setTimeout(() => {
					const id2 = this.idSeed
					const aiMsg = { id:id2, role:'ai', text:'（模拟回复）已收到：'+userMsg.text }
					this.messages = [...this.messages, aiMsg]
					this.idSeed = id2 + 1
					this.typing = false
					this.saveChatHistory()
					this.$nextTick(() => this.scrollInto = 'msg-' + id2)
			}, 700)
			}
		},

		// 原有逻辑：快捷指令使用
		useQuick(q){
			this.draft = q
			if(/提醒/.test(q)){
				uni.showModal({ 
					title:'已设置提醒', 
					content:`指令：${q}\n时间：明日 09:00（示例）`, 
					showCancel:false 
				})
			}
			this.send()
		},

		// 原有逻辑：清空会话
		clearAll(){ 
			this.messages = []
			this.idSeed = 1
			this.scrollInto = 'bottom-anchor'
			this.saveChatHistory()
			uni.showToast({ title:'会话已清空', icon:'none' })
		},
		
		// 新增：功能面板控制方法
		toggleQuickPanel() {
			this.isQuickPanelCollapsed = !this.isQuickPanelCollapsed
		},
		
		// 显示更多功能
		showMoreFunctions() {
			this.showMoreFunctionsModal = true
		},
		
		// 关闭更多功能弹窗
		closeMoreFunctionsModal() {
			this.showMoreFunctionsModal = false
		},
		
		// 新增：处理附件
		handleAttachment() {
			uni.showToast({ title: '附件功能', icon: 'none' })
		},
		
		// 新增：处理编辑
		handleEdit() {
			uni.showToast({ title: '编辑功能', icon: 'none' })
		},
		
		// 新增：处理通话
		handleCall() {
			uni.showToast({ title: '通话功能', icon: 'none' })
		},
		
		// 新增：处理相机
		handleCamera() {
			uni.chooseImage({
				count: 1,
				sizeType: ['original', 'compressed'],
				sourceType: ['camera', 'album'],
				success: (res) => {
					const tempFilePath = res.tempFilePaths[0]
					// 处理图片
					this.handleImageUpload(tempFilePath)
				},
				fail: (err) => {
					console.log('选择图片失败:', err)
					uni.showToast({ title: '选择图片失败', icon: 'none' })
				}
			})
		},
		
		// 处理图片上传
		handleImageUpload(imagePath) {
			// 这里可以添加图片上传逻辑
			uni.showToast({ title: '图片已选择', icon: 'success' })
			// 可以将图片添加到消息中
			this.sendImageMessage(imagePath)
		},
		
		// 发送图片消息
		sendImageMessage(imagePath) {
			const newMsg = {
				id: this.idSeed++,
				role: 'user',
				text: '',
				image: imagePath
			}
			this.messages.push(newMsg)
			this.scrollInto = 'bottom-anchor'
			this.saveChatHistory()
		},

		// 原有逻辑：加载/保存快捷指令
		loadUserQuick(){
			this.userQuick = storageManager.getUserQuick() || []
		},
		saveUserQuick(){
			storageManager.saveUserQuick(this.userQuick)
		},
		addQuick(){
			uni.showModal({
				title:'添加快捷指令',
				editable:true,
				placeholderText:'例如：设置明日7点提醒喝水',
				success:(res)=>{
					if(res.confirm){
						const val = (res.content||'').trim()
						if(!val) return
						if(this.presetQuick.includes(val) || this.userQuick.includes(val)){
							uni.showToast({ title:'已存在该指令', icon:'none' })
							return
						}
						this.userQuick = [...this.userQuick, val]
						this.saveUserQuick()
						uni.showToast({ title:'已添加', icon:'success' })
					}
				}
			})
		},
		removeQuick(q){
			uni.showModal({
				title:'删除快捷指令',
				content:`确定删除"${q}"吗？`,
				success:(res)=>{
					if(res.confirm){
						this.userQuick = this.userQuick.filter(i=>i!==q)
						this.saveUserQuick()
						uni.showToast({ title:'已删除', icon:'none' })
					}
				}
			})
		},

		// 原有逻辑：加载/保存聊天历史
		loadChatHistory(){
			const saved = storageManager.getChatHistory()
			if(saved && saved.length > 0) {
				this.messages = saved
				this.idSeed = Math.max(...saved.map(m => m.id)) + 1
			}
		},
		saveChatHistory(){
			storageManager.saveChatHistory(this.messages)
		},
		
		// 语音控制相关方法
		toggleVoicePlay() {
			this.voiceEnabled = !this.voiceEnabled
			uni.showToast({
				title: this.voiceEnabled ? '语音已开启' : '语音已关闭',
				icon: 'none'
			})
			// 触觉反馈
			if (uni.vibrateShort) {
				try { uni.vibrateShort({ type: 'light' }) } catch(e){}
			}
		},
		
		showVoiceHelp() {
			const helpText = '语音指令帮助：\n• "我要交电费" - 跳转缴费页面\n• "帮我叫车" - 跳转出行服务\n• "查看健康" - 查看健康信息\n• "紧急求助" - 紧急联系人\n• "今天天气" - 查看天气'
			uni.showModal({
				title: '语音指令帮助',
				content: helpText,
				showCancel: false,
				confirmText: '知道了'
			})
		},
		
		// 处理语音识别结果
		handleVoiceCommand(text) {
			const command = this.voiceCommands.find(cmd => 
				text.includes(cmd.text) || cmd.text.includes(text)
			)
			
			if (command) {
				this.executeVoiceCommand(command)
			} else {
				// 如果没有匹配的指令，作为普通消息发送
				this.draft = text
				this.send()
			}
		},
		
		executeVoiceCommand(command) {
			switch(command.action) {
				case 'navigate':
					uni.navigateTo({ url: command.target })
					break
				case 'emergency':
					this.handleEmergencyCall()
					break
				case 'weather':
					this.getWeatherInfo()
					break
				default:
					this.draft = command.text
					this.send()
			}
		},
		
		handleEmergencyCall() {
			uni.showModal({
				title: '紧急求助',
				content: '是否立即拨打紧急联系人电话？',
				confirmText: '立即拨打',
				cancelText: '取消',
				success: (res) => {
					if (res.confirm) {
						uni.makePhoneCall({
							phoneNumber: '120' // 实际应用中从用户设置获取
						})
					}
				}
			})
		},
		
		getWeatherInfo() {
			// 模拟获取天气信息
			const weatherMsg = {
				id: this.idSeed++,
				role: 'ai',
				text: '今天天气晴朗，温度24°C，适合外出。记得多喝水哦！'
			}
			this.messages.push(weatherMsg)
			this.scrollToBottom()
			this.saveChatHistory()
		}
	}
}
</script>

<style scoped>
.page{min-height:100vh;background:linear-gradient(180deg,#2D3047,#1A1C2E)}
/* AI页面适老化优化 */
/* 顶部导航栏 - 专业标识设计 */
.ai-topbar {
  background: #fff;
  padding: 24rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.1);
  border-bottom: 1rpx solid #f0f0f0;
}

.header-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}

.ai-title {
  color: $elderly-text-primary;
  font-size: $elderly-font-xl;
  font-weight: 700;
  margin-bottom: 4rpx;
}

.ai-subtitle {
  color: $elderly-text-secondary;
  font-size: $elderly-font-sm;
  font-weight: 400;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 16rpx;
}

.voice-switch {
  width: 48rpx;
  height: 48rpx;
  border-radius: 24rpx;
  background: #f8f9fa;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  border: 1rpx solid #e9ecef;
}

.voice-switch.active {
  background: $theme-orange;
  border-color: $theme-orange;
  transform: scale(1.05);
}

.switch-icon {
  font-size: 24rpx;
  color: #6c757d;
}

.voice-switch.active .switch-icon {
  color: #fff;
}

.help-btn {
  width: 48rpx;
  height: 48rpx;
  border-radius: 24rpx;
  background: #f8f9fa;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  border: 1rpx solid #e9ecef;
}

.help-btn:hover {
  background: #e9ecef;
  transform: scale(1.05);
}

.help-icon {
  font-size: 24rpx;
  color: #6c757d;
}

.ai-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: $elderly-spacing-sm;
}

.ai-title {
  font-size: $elderly-font-xl;
  font-weight: 700;
  color: #fff;
}

.ai-status {
  padding: $elderly-spacing-xs $elderly-spacing-sm;
  background: rgba(0, 212, 255, 0.2);
  border-radius: $elderly-radius-base;
  border: 2rpx solid $theme-blue;
}

.status-text {
  color: $theme-blue;
  font-weight: 600;
  font-size: $elderly-font-sm;
}

.ai-voice-controls {
  display: flex;
  align-items: center;
  gap: $elderly-spacing-base;
}

.voice-switch {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: $elderly-spacing-sm;
  min-width: $elderly-touch-sm;
  min-height: $elderly-touch-sm;
  background: rgba(255, 255, 255, 0.1);
  border-radius: $elderly-radius-base;
  border: 2rpx solid transparent;
  transition: all 0.3s ease;
}

.voice-switch.active {
  background: rgba(255, 107, 53, 0.2);
  border-color: $theme-orange;
}

.voice-icon {
  font-size: $elderly-font-lg;
  margin-bottom: 4rpx;
}

.voice-label {
  color: #fff;
  font-size: $elderly-font-xs;
  text-align: center;
}

.voice-help {
  display: flex;
  align-items: center;
  justify-content: center;
  width: $elderly-touch-sm;
  height: $elderly-touch-sm;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  border: 2rpx solid rgba(255, 255, 255, 0.3);
}

.help-icon {
  font-size: $elderly-font-lg;
  color: #fff;
}
.ai-title{font-size:32rpx}
.ai-voice-switch{opacity:.8;cursor:pointer}

/* 中部对话区 - 沉浸式对话体验 */
.chat-list{height:calc(100vh - 200rpx);padding:16rpx 24rpx 0;box-sizing:border-box;margin-bottom:180rpx;background:#f8f9fa}

/* 欢迎引导区域 */
.welcome-section{margin:20rpx 0}

.welcome-card{background:#fff;border-radius:16rpx;padding:24rpx;box-shadow:0 2rpx 8rpx rgba(0,0,0,0.1);border:1rpx solid #e9ecef}

.welcome-title{color:$elderly-text-primary;font-size:$elderly-font-lg;font-weight:600;margin-bottom:12rpx;display:block}

.welcome-desc{color:$elderly-text-secondary;font-size:$elderly-font-sm;margin-bottom:20rpx;display:block;line-height:1.5}

.example-questions{}

.example-title{color:$elderly-text-primary;font-size:$elderly-font-sm;font-weight:500;margin-bottom:12rpx;display:block}

.question-chips{display:flex;flex-wrap:wrap;gap:12rpx}

.question-chip{background:rgba(255,126,41,0.1);border:1rpx solid rgba(255,126,41,0.3);border-radius:20rpx;padding:8rpx 16rpx;transition:all 0.3s ease}

.question-chip:hover{background:rgba(255,126,41,0.2);transform:translateY(-1rpx)}

.chip-text{color:$theme-orange;font-size:$elderly-font-sm;font-weight:500}

/* 消息列表样式 */
.msg-row{display:flex;align-items:flex-end;margin:18rpx 0}

.left{flex-direction:row}

.right{flex-direction:row-reverse}

.avatar-container{position:relative;margin:0 12rpx}

.avatar{width:48rpx;height:48rpx;border-radius:50%;border:2rpx solid #fff;box-shadow:0 2rpx 8rpx rgba(0,0,0,0.1);object-fit:cover}

/* AI头像特殊样式 */
.avatar-container .avatar[src*="ai-avatar"]{border:3rpx solid $theme-orange;box-shadow:0 4rpx 12rpx rgba(255,126,41,0.3)}

.avatar-badge{position:absolute;top:-4rpx;right:-4rpx;width:20rpx;height:20rpx;background:$theme-orange;color:#fff;border-radius:50%;font-size:12rpx;display:flex;align-items:center;justify-content:center;font-weight:bold;border:2rpx solid #fff}

.bubble{max-width:70%;padding:18rpx 22rpx;font-size:30rpx;word-break:break-word;border-radius:20rpx;box-shadow:0 4rpx 12rpx rgba(0,0,0,0.1);position:relative;font-weight:600;line-height:1.5}

.bubble.user{background:$theme-orange;color:#000;border-top-right-radius:8rpx;text-shadow:0 1rpx 2rpx rgba(255,255,255,0.3)}

.bubble.ai{background:#fff;color:$elderly-text-primary;border:1rpx solid #e9ecef;border-top-left-radius:8rpx}

/* AI消息文本特殊样式 */
.bubble.ai .message-text{color:$elderly-text-primary;letter-spacing:0.5rpx}

.message-text{line-height:1.5}

/* 用户消息文本特殊样式 */
.bubble.user .message-text{color:#000;text-shadow:0 1rpx 2rpx rgba(255,255,255,0.3);letter-spacing:0.5rpx}

/* 消息图片样式 */
.msg-image{width:240rpx;height:auto;border-radius:16rpx;margin-top:8rpx}

/* 思考中三点波浪 */
.typing{display:flex;align-items:center;gap:8rpx}
.typing .d1,.typing .d2,.typing .d3{display:inline-block;width:10rpx;height:10rpx;border-radius:50%;background:#fff;opacity:.9}
.typing .d1{animation:jump 1s ease-in-out infinite}
.typing .d2{animation:jump 1s ease-in-out .15s infinite}
.typing .d3{animation:jump 1s ease-in-out .3s infinite}
@keyframes jump{0%,100%{transform:translateY(0)}50%{transform:translateY(-6rpx)}}

/* 功能面板 - 可折叠设计 */
.quick-panel{position:fixed;left:0;right:0;bottom:160rpx;background:rgba(255,255,255,0.98);backdrop-filter:blur(20rpx);border-top:3rpx solid rgba(0,0,0,0.1);z-index:5;box-shadow:0 -6rpx 24rpx rgba(0,0,0,0.15);transition:all 0.3s ease;border-radius:24rpx 24rpx 0 0;margin:0 16rpx 0 16rpx}

.quick-panel.collapsed{bottom:80rpx;padding:16rpx 24rpx}

/* 面板头部 */
.panel-header{display:flex;justify-content:space-between;align-items:center;padding:20rpx 24rpx;border-bottom:1rpx solid rgba(0,0,0,0.05);cursor:pointer}

.panel-title{color:$elderly-text-primary;font-weight:700}

.panel-toggle{color:$theme-orange;font-size:$elderly-font-sm;font-weight:600;padding:8rpx 16rpx;background:rgba(255,126,41,0.1);border-radius:16rpx}

/* 功能分组 - 增强视觉层级 */
.function-group{margin:24rpx 0;padding:0 24rpx}

.group-header{margin-bottom:16rpx}

.group-title{color:$elderly-text-primary;font-size:$elderly-font-lg;font-weight:700;margin-bottom:4rpx;display:block}

.group-subtitle{color:$elderly-text-secondary;font-size:$elderly-font-sm;font-weight:500;display:block}

.group-buttons{display:flex;flex-wrap:wrap;gap:16rpx}

/* 更多功能 */
.more-functions{padding:0 24rpx 20rpx;border-top:1rpx solid rgba(0,0,0,0.05);margin-top:20rpx}
/* 功能按钮样式优化 - 增强视觉反馈 */
.chip{height:80rpx;padding:0 20rpx;border-radius:20rpx;display:flex;align-items:center;gap:12rpx;color:#2D3047;border:2rpx solid transparent;white-space:nowrap;cursor:pointer;transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);box-shadow:0 4rpx 12rpx rgba(0,0,0,0.1);margin:8rpx 0;font-weight:600;position:relative;overflow:hidden;background:rgba(255,255,255,0.9);backdrop-filter:blur(10rpx)}

/* 核心功能按钮 */
.chip.core-function{background:rgba(255,255,255,0.95);border:2rpx solid rgba(74,144,226,0.2);box-shadow:0 6rpx 20rpx rgba(74,144,226,0.15)}

.chip.core-function.frequent{background:rgba(255,126,41,0.1);border:2rpx solid rgba(255,126,41,0.3);box-shadow:0 8rpx 24rpx rgba(255,126,41,0.2);transform:scale(1.02)}

/* 生活服务按钮 */
.chip.service-function{background:rgba(255,255,255,0.95);border:2rpx solid rgba(157,78,221,0.2);box-shadow:0 6rpx 20rpx rgba(157,78,221,0.15)}

/* 更多功能按钮 */
.chip.more-btn{background:rgba(255,255,255,0.9);color:$theme-orange;border:2rpx solid rgba(255,126,41,0.3);box-shadow:0 4rpx 12rpx rgba(0,0,0,0.1)}

/* 图标包装器 */
.chip-icon-wrapper{width:48rpx;height:48rpx;border-radius:12rpx;display:flex;align-items:center;justify-content:center;transition:all 0.3s ease}

.chip-icon{font-size:24rpx;line-height:1;transition:all 0.3s ease}

.chip-text{font-size:$elderly-font-sm;font-weight:600;line-height:1;color:$elderly-text-primary}

/* 按钮悬停效果 - 增强反馈 */
.chip:hover{transform:translateY(-3rpx) scale(1.02);box-shadow:0 8rpx 28rpx rgba(0,0,0,0.15)}

.chip:active{transform:translateY(-1rpx) scale(0.98);box-shadow:0 4rpx 16rpx rgba(0,0,0,0.2)}

.chip:hover .chip-icon-wrapper{transform:scale(1.1)}

.chip:active .chip-icon-wrapper{transform:scale(0.95)}

/* 原有按钮样式保持 */
.chip.preset{background:linear-gradient(135deg,#00D4FF,#4785F5);color:#fff}
.chip.user-defined{background:linear-gradient(135deg,#FF6B35,#FFD166);color:#fff}
.chip.add{background:#fff;color:#00D4FF;border-color:#adc6ff}
.chip.clear{background:#fff;color:#FF375F;border-color:#ffe58f}
.chip.preset{background:linear-gradient(135deg,#00D4FF,#4785F5);color:#fff}
.chip.user-defined{background:linear-gradient(135deg,#FF6B35,#FFD166);color:#fff}
.chip.add{background:#fff;color:#00D4FF;border-color:#adc6ff}
.chip.clear{background:#fff;color:#FF375F;border-color:#ffe58f}

/* 底部操作栏 - 四大功能入口设计 */
.fixed-input-bar{position:fixed;left:0;right:0;bottom:0;background:#fff;z-index:1000;box-shadow:0 -4rpx 20rpx rgba(0,0,0,0.15);border-top:1rpx solid #e9ecef}

.input-container{padding:20rpx 24rpx 32rpx 24rpx;background:transparent}

/* 四大功能入口区域 */
.function-entries-section{margin-bottom:20rpx}

.function-entries-row{display:flex;justify-content:space-between;gap:12rpx}

.function-entry{display:flex;flex-direction:column;align-items:center;padding:16rpx 12rpx;background:#f8f9fa;border-radius:16rpx;transition:all 0.3s ease;cursor:pointer;min-width:120rpx;border:1rpx solid #e9ecef}

.function-entry:hover{background:#e9ecef;transform:translateY(-2rpx);box-shadow:0 4rpx 12rpx rgba(0,0,0,0.1)}

.function-entry:active{transform:translateY(0);box-shadow:0 2rpx 8rpx rgba(0,0,0,0.1)}

.entry-icon{font-size:32rpx;margin-bottom:8rpx;line-height:1}

.entry-text{color:$elderly-text-primary;font-size:$elderly-font-sm;font-weight:500;text-align:center;line-height:1.2}

/* 输入栏区域 */
.input-section{}

.input-wrapper{display:flex;align-items:center;background:#f8f9fa;border:2rpx solid #e9ecef;border-radius:24rpx;padding:12rpx 16rpx;gap:12rpx;min-height:88rpx}

.main-input-field{flex:1;height:56rpx;background:transparent;border:none;outline:none;font-size:28rpx;color:#2D3047;line-height:56rpx}

/* 语音按钮样式 */
.voice-btn{width:64rpx;height:64rpx;border-radius:32rpx;background:$theme-orange;display:flex;align-items:center;justify-content:center;transition:all 0.3s ease;cursor:pointer;box-shadow:0 4rpx 12rpx rgba(255,126,41,0.3)}

.voice-btn:hover{background:#FF8E35;transform:scale(1.05);box-shadow:0 6rpx 16rpx rgba(255,126,41,0.4)}

.voice-btn:active{transform:scale(0.95)}

.voice-btn.voice-active{background:#FF375F;animation:pulse 1.2s ease-in-out infinite;box-shadow:0 6rpx 16rpx rgba(255,55,95,0.4)}

.voice-icon{display:flex;align-items:center;justify-content:center}

.mic-icon{font-size:28rpx;color:#fff;line-height:1}

/* 新话题功能区域 */
.new-topics-section{margin-bottom:20rpx}

.new-topics-title{color:$elderly-text-primary;font-size:$elderly-font-lg;font-weight:600;text-align:center;margin-bottom:16rpx;display:block}

.topic-buttons-row{display:flex;justify-content:space-between;gap:12rpx}

.topic-btn{display:flex;flex-direction:column;align-items:center;padding:16rpx 12rpx;background:rgba(255,255,255,0.9);border-radius:16rpx;transition:all 0.3s ease;cursor:pointer;min-width:120rpx;border:1rpx solid rgba(0,0,0,0.05)}

.topic-btn:hover{background:rgba(255,255,255,1);transform:translateY(-2rpx);box-shadow:0 4rpx 12rpx rgba(0,0,0,0.1)}

.topic-btn:active{transform:translateY(0);box-shadow:0 2rpx 8rpx rgba(0,0,0,0.1)}

.topic-icon{font-size:32rpx;margin-bottom:8rpx;line-height:1}

.topic-text{color:$elderly-text-primary;font-size:$elderly-font-sm;font-weight:500;text-align:center;line-height:1.2}

/* 主输入框区域 */
.main-input-section{}

.input-wrapper{display:flex;align-items:center;background:#fff;border:2rpx solid #e5e7eb;border-radius:24rpx;padding:12rpx 16rpx;gap:12rpx;min-height:88rpx}

.main-input-field{flex:1;height:56rpx;background:transparent;border:none;outline:none;font-size:28rpx;color:#2D3047;line-height:56rpx}

/* 右侧输入框功能按钮 */
.right-input-actions{display:flex;align-items:center;gap:8rpx}

/* 相机按钮样式 */
.camera-btn{width:48rpx;height:48rpx;border-radius:24rpx;background:#f8f9fa;display:flex;align-items:center;justify-content:center;transition:all 0.3s ease;cursor:pointer;border:1rpx solid #e9ecef}

.camera-btn:hover{background:#e9ecef;transform:scale(1.05);box-shadow:0 2rpx 8rpx rgba(0,0,0,0.1)}

.camera-btn:active{transform:scale(0.95)}

.camera-icon{position:relative;width:24rpx;height:24rpx;border:2rpx solid #6c757d;border-radius:50%;background:#fff}

.camera-lens{position:absolute;top:50%;left:50%;width:12rpx;height:12rpx;border:2rpx solid #6c757d;border-radius:50%;background:#fff;transform:translate(-50%, -50%)}

.camera-flash{position:absolute;top:2rpx;right:2rpx;width:6rpx;height:6rpx;background:#6c757d;border-radius:2rpx}

/* 语音按钮样式 */
.voice-btn{width:48rpx;height:48rpx;border-radius:24rpx;background:#f8f9fa;display:flex;align-items:center;justify-content:center;transition:all 0.3s ease;cursor:pointer;border:1rpx solid #e9ecef}

.voice-btn:hover{background:#e9ecef;transform:scale(1.05);box-shadow:0 2rpx 8rpx rgba(0,0,0,0.1)}

.voice-btn:active{transform:scale(0.95)}

.voice-btn.voice-active{background:#FF375F;border-color:#FF375F;animation:pulse 1.2s ease-in-out infinite}

.voice-icon{position:relative;width:24rpx;height:24rpx;display:flex;align-items:center;justify-content:center}

.voice-wave{position:absolute;width:4rpx;height:4rpx;background:#6c757d;border-radius:50%;animation:voiceWave 1.5s ease-in-out infinite}

.voice-btn.voice-active .voice-wave{background:#fff}

.voice-wave.wave1{animation-delay:0s}

.voice-wave.wave2{animation-delay:0.2s}

.voice-wave.wave3{animation-delay:0.4s}

@keyframes voiceWave{0%,100%{opacity:0;transform:scale(0.5)}50%{opacity:1;transform:scale(1.2)}}

/* 加号按钮样式 */
.plus-btn{width:48rpx;height:48rpx;border-radius:24rpx;background:#f8f9fa;display:flex;align-items:center;justify-content:center;transition:all 0.3s ease;cursor:pointer;border:1rpx solid #e9ecef}

.plus-btn:hover{background:#e9ecef;transform:scale(1.05);box-shadow:0 2rpx 8rpx rgba(0,0,0,0.1)}

.plus-btn:active{transform:scale(0.95)}

.plus-icon{font-size:24rpx;color:#6c757d;font-weight:bold;line-height:1}

/* 功能按钮样式 - 仿照图片设计 */
.action-btn{width:56rpx;height:56rpx;border-radius:28rpx;background:#f8f9fa;display:flex;align-items:center;justify-content:center;transition:all 0.3s ease;cursor:pointer;border:1rpx solid #e9ecef}

.action-btn:hover{background:#e9ecef;transform:scale(1.05);box-shadow:0 2rpx 8rpx rgba(0,0,0,0.1)}

.action-btn:active{transform:scale(0.95)}

.action-btn.voice-active{background:#FF375F;color:#fff;animation:pulse 1.2s ease-in-out infinite;border-color:#FF375F}

.action-icon{font-size:22rpx;line-height:1;color:#6c757d}

.action-btn.voice-active .action-icon{color:#fff}

/* 模式按钮样式 */
.mode-btn{display:flex;align-items:center;gap:8rpx;padding:12rpx 20rpx;border-radius:24rpx;background:#f8f9fa;transition:all 0.3s ease;cursor:pointer;min-height:56rpx;border:1rpx solid #e9ecef}

.mode-btn.active{background:linear-gradient(135deg,#4A90E2,#6DD400);color:#fff;border-color:transparent;box-shadow:0 4rpx 12rpx rgba(74,144,226,0.3)}

.mode-btn:hover{background:#e9ecef;transform:scale(1.02);box-shadow:0 2rpx 8rpx rgba(0,0,0,0.1)}

.mode-btn:active{transform:scale(0.98)}

.mode-btn.active:hover{background:linear-gradient(135deg,#4A90E2,#6DD400);transform:scale(1.02);box-shadow:0 6rpx 16rpx rgba(74,144,226,0.4)}

.mode-icon{font-size:20rpx;line-height:1;color:#6c757d}

.mode-btn.active .mode-icon{color:#fff}

.mode-text{font-size:26rpx;font-weight:600;line-height:1;color:#495057}

.mode-btn.active .mode-text{color:#fff}

/* 发送按钮样式 */
.send-btn{width:56rpx;height:56rpx;border-radius:28rpx;background:#f8f9fa;display:flex;align-items:center;justify-content:center;transition:all 0.3s ease;cursor:pointer;border:1rpx solid #e9ecef}

.send-btn.active{background:linear-gradient(135deg,#FF7E29,#FFD166);color:#fff;transform:scale(1.05);border-color:transparent;box-shadow:0 4rpx 12rpx rgba(255,126,41,0.3)}

.send-btn:hover{background:#e9ecef;transform:scale(1.05);box-shadow:0 2rpx 8rpx rgba(0,0,0,0.1)}

.send-btn:active{transform:scale(0.95)}

.send-btn.active:hover{background:linear-gradient(135deg,#FF7E29,#FFD166);transform:scale(1.1);box-shadow:0 6rpx 16rpx rgba(255,126,41,0.4)}

.send-icon{font-size:22rpx;line-height:1;font-weight:bold;color:#6c757d}

.send-btn.active .send-icon{color:#fff}

.voice-status{position:absolute;top:-50rpx;left:24rpx;right:24rpx;background:rgba(255,55,95,0.9);color:#fff;padding:12rpx 20rpx;border-radius:24rpx;text-align:center;font-size:26rpx;backdrop-filter:blur(10rpx);box-shadow:0 4rpx 16rpx rgba(255,55,95,0.3)}

.status-text{color:#fff;font-weight:600}
.ibox{flex:1;display:flex;align-items:center;gap:12rpx;background:#fff;border:2rpx solid #222;border-radius:40rpx;padding:8rpx 12rpx;height:88rpx}

/* 输入框样式优化 */
.ibox-input{flex:1;height:64rpx;background:transparent;border-radius:32rpx;padding:0 24rpx;font-size:28rpx;color:#2D3047;outline:none;min-width:120rpx}
.ph{color:#999;font-size:26rpx}

/* 圆形按钮样式统一 */
.circle-btn{width:64rpx;height:64rpx;border-radius:50%;border:2rpx solid #222;display:flex;align-items:center;justify-content:center;background:#fff;color:#222;cursor:pointer;transition:all 0.2s ease}
.circle-btn.ghost{background:#fff}
.circle-btn.send{background:linear-gradient(135deg,#00D4FF,#4785F5);border-color:transparent;color:#fff}
/* 语音按钮激活态 */
.circle-btn.voice-active{background:#FF375F;border-color:#FF375F;position:relative;overflow:hidden}
.circle-btn.voice-active .cb-icon{filter:invert(1);opacity:1}
/* 录音时波纹扩散动效 */
.circle-btn.voice-active::before{content:'';position:absolute;left:50%;top:50%;width:100%;height:100%;border-radius:50%;background:rgba(255,255,255,.3);transform:translate(-50%,-50%) scale(0);animation:voiceRipple 1.4s ease-out infinite}
@keyframes voiceRipple{0%{transform:translate(-50%,-50%) scale(0);opacity:1}70%{transform:translate(-50%,-50%) scale(1.6);opacity:0}100%{transform:translate(-50%,-50%) scale(1.8);opacity:0}}
/* 禁用状态优化 */
.circle-btn.disabled{background:#d1d5db;border-color:#d1d5db;cursor:not-allowed;transform:none}
/* 点击反馈 */
.pressed{transform:scale(.95);opacity:.8}

.cb-icon{width:36rpx;height:36rpx;opacity:.95}
.cb-txt{font-size:32rpx;color:#222}
.circle-btn.send .cb-txt{color:#fff}

/* 新增：语音录制提示 */
.voice-recording-tip{position:fixed;bottom:200rpx;left:50%;transform:translateX(-50%);background:rgba(0,0,0,0.85);color:#fff;padding:24rpx 40rpx;border-radius:40rpx;font-size:28rpx;z-index:1000;white-space:nowrap;box-shadow:0 6rpx 24rpx rgba(0,0,0,0.4)}

/* 新增：正在输入提示 */
.typing-tip{position:fixed;bottom:180rpx;left:40rpx;color:#9ca3af;font-size:24rpx;z-index:999;background:rgba(255,255,255,0.95);padding:10rpx 20rpx;border-radius:24rpx;backdrop-filter:blur(12rpx);box-shadow:0 4rpx 16rpx rgba(0,0,0,0.1)}

.divider{position:fixed;left:0;right:0;bottom:160rpx;height:4rpx;background:linear-gradient(90deg,transparent,rgba(0,0,0,0.15),transparent);z-index:6}

/* 更多功能弹窗样式 - 优化布局和交互 */
.more-functions-modal{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.7);display:flex;align-items:flex-end;justify-content:center;z-index:1000;backdrop-filter:blur(8rpx)}

.modal-content{background:$theme-card;border-radius:24rpx 24rpx 0 0;width:100%;max-height:85vh;display:flex;flex-direction:column;animation:slideUp 0.4s cubic-bezier(0.4, 0, 0.2, 1);box-shadow:0 -8rpx 32rpx rgba(0,0,0,0.3)}

.modal-header{display:flex;justify-content:space-between;align-items:center;padding:24rpx;border-bottom:2rpx solid $elderly-border;background:rgba(255,255,255,0.95);backdrop-filter:blur(10rpx)}

.header-left{display:flex;align-items:center;gap:16rpx}

.back-btn{width:48rpx;height:48rpx;border-radius:24rpx;background:$theme-warm-gray;display:flex;align-items:center;justify-content:center;transition:all 0.2s ease;cursor:pointer}

.back-btn:hover{background:$grad-sunrise;transform:scale(1.1)}

.back-icon{font-size:$elderly-font-lg;color:$elderly-text-primary;font-weight:bold}

.header-text{display:flex;flex-direction:column;gap:4rpx}

.modal-title{color:$elderly-text-primary;font-weight:700;font-size:$elderly-font-lg}

.modal-subtitle{color:$elderly-text-secondary;font-size:$elderly-font-sm;font-weight:500}

.close-btn{width:48rpx;height:48rpx;border-radius:24rpx;background:$theme-warm-gray;display:flex;align-items:center;justify-content:center;transition:all 0.2s ease;cursor:pointer}

.close-btn:hover{background:rgba(255,55,95,0.1);transform:scale(1.1)}

.close-icon{font-size:$elderly-font-lg;color:$elderly-text-secondary}

.modal-body{flex:1;padding:24rpx;overflow-y:auto;background:rgba(248,249,250,0.5)}

.function-category{margin-bottom:32rpx;background:rgba(255,255,255,0.8);border-radius:16rpx;padding:20rpx;backdrop-filter:blur(10rpx);box-shadow:0 4rpx 16rpx rgba(0,0,0,0.05)}

.category-header{margin-bottom:16rpx}

.category-title{color:$elderly-text-primary;font-size:$elderly-font-lg;font-weight:700;margin-bottom:4rpx;display:block}

.category-description{color:$elderly-text-secondary;font-size:$elderly-font-sm;font-weight:500;display:block}

.category-functions{display:grid;grid-template-columns:repeat(2,1fr);gap:16rpx}

.function-item{display:flex;flex-direction:column;align-items:center;padding:20rpx;background:rgba(255,255,255,0.9);border-radius:16rpx;transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);min-height:120rpx;justify-content:center;border:2rpx solid transparent;cursor:pointer}

.function-item:hover{background:rgba(255,255,255,1);transform:translateY(-4rpx) scale(1.02);box-shadow:0 8rpx 24rpx rgba(0,0,0,0.15);border-color:var(--icon-color, $theme-orange)}

.function-item:active{transform:translateY(-2rpx) scale(0.98);box-shadow:0 4rpx 16rpx rgba(0,0,0,0.2)}

.function-icon-wrapper{width:56rpx;height:56rpx;border-radius:16rpx;display:flex;align-items:center;justify-content:center;margin-bottom:8rpx;transition:all 0.3s ease}

.function-icon{font-size:28rpx;transition:all 0.3s ease}

.function-name{color:$elderly-text-primary;font-size:$elderly-font-sm;font-weight:600;text-align:center;line-height:1.3}

.function-item:hover .function-icon-wrapper{transform:scale(1.1)}

.function-item:active .function-icon-wrapper{transform:scale(0.95)}

/* 动画效果 */
@keyframes slideUp{0%{transform:translateY(100%)}100%{transform:translateY(0)}}

.safe-gap{height:40rpx}
</style>

